<template>
  <view class="personal-center">
    <!-- 用户信息区域 -->
    <view class="user-info" @click="handleLogin">
      <view class="avatar-box">
        <image class="avatar" src="/static/default-avatar.png"></image>
        <image
          class="vip-badge"
          src="/static/vip/vip.png"
          :style="{ filter: vipInfo ? 'none' : 'grayscale(1)', opacity: vipInfo ? 1 : 0.5 }"
          @click.stop="handleVipClick"
        />
      </view>
      <view class="info">
        <text class="title">个人中心</text>
      </view>
      <view class="exchange-btn1" @click="goToSign">
        <text>签到</text>
      </view>
      <uni-icons type="arrowright" size="20" color="#999"></uni-icons>
    </view>

    <!-- 功能列表 -->
    <view class="function-list">
      <view class="list-item" v-for="item in functionList" :key="item.id" @click="handleItemClick(item)">
        <uni-icons :type="item.icon" size="20" :color="item.color"></uni-icons>
        <text class="item-text">{{item.name}}</text>
        <uni-icons type="arrowright" size="16" color="#ccc"></uni-icons>
      </view>
    </view>
    <view class="logout-container">
      <button class="logout-btn" @click="logout">退出登录</button>
    </view>
  </view>
</template>

<script>
import userManager from '../../utils/user.js';
export default {
  data() {
    return {
      functionList: [
        { id: 1, name: '我的回答', icon: 'chat', color: '#4CAF50' },
        { id: 10, name: '上传试题', icon: 'cloud-upload', color: '#3F51B5' },
        { id: 11, name: '练习设置', icon: 'settings', color: '#009688' },
        { id: 12, name: '个人设置', icon: 'gear', color: '#673AB7' },
        { id: 13, name: '设置密码', icon: 'lock', color: '#FF9800' },
        { id: 14, name: '退出登录', icon: 'power', color: '#F44336' }
      ],
      vipInfo: null,
      isLogin: false,
      userInfo: {}
    }
  },
  onShow() {
    this.getVipInfo();
    // 每次显示页面时检查登录状态
    this.checkLogin();
  },
  methods: {
    async getVipInfo() {
      try {
        const res = await uni.request({
          url: 'http://127.0.0.1:9224/user/ByVip',
          method: 'GET',
          data: { userId: 1 }
        });
        if (res.data && res.data.code === 200 && res.data.data) {
          this.vipInfo = res.data.data;
        } else {
          this.vipInfo = null;
        }
      } catch (e) {
        this.vipInfo = null;
      }
    },
    // 检查登录状态
    checkLogin() {
      try {
        // 使用导入的 userManager 获取用户信息
        const userInfo = userManager.getUserInfo();

        if (userInfo) {
          this.userInfo = userInfo;
          this.isLogin = true;
        } else {
          this.isLogin = false;
          this.userInfo = {};
        }
      } catch (e) {
        console.error('检查登录状态出错:', e);
        this.isLogin = false;
      }
    },
    handleVipClick() {
      uni.navigateTo({ url: '/pages/sign/vip-detail' });
    },
    handleLogin() {
      uni.navigateTo({
        url: '/pages/login/login'
      })
    },
    handleItemClick(item) {
      // 根据不同的item.id跳转到不同页面
      switch(item.id) {
        case 1:
          uni.navigateTo({ url: '/pages/personal/my-answers' });
          break;
        case 2:
          uni.navigateTo({ url: '/pages/personal/my-questions' });
          break;
        // 其他case类似...
        case 13:
          this.goToSetPassword();
          break;
        case 14:
          this.logout();
          break;
        default:
          uni.showToast({
            title: `${item.name}功能开发中`,
            icon: 'none'
          });
      }
    },
    goToSign() {
      uni.navigateTo({
        url: '/pages/sign/sign'
      })
    },
    goToSetPassword() {
      uni.navigateTo({
        url: '/pages/user/set-password'
      });
    },
    goToLogin() {
      uni.navigateTo({
        url: '/pages/login/login'
      });
    },
    maskPhone(phone) {
      if (!phone) return '';
      return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
    },
    // 退出登录
    logout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            // 使用导入的 userManager 清除用户信息
            userManager.clearUserInfo();

            // 更新状态
            this.isLogin = false;
            this.userInfo = {};

            uni.showToast({
              title: '已退出登录',
              icon: 'success'
            });

            // 退出登录后跳转到登录页面
            setTimeout(() => {
              uni.reLaunch({
                url: '/pages/login/login'
              });
            }, 1500);
          }
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.personal-center {
  padding: 20rpx;
  padding-bottom: 300rpx; /* 显著增加底部填充，测试是否能显示底部内容 */
  background-color: #f5f5f5;
  min-height: 100vh;
  /* 确保最外层容器在内容超出时可以滚动 */
  overflow-y: auto; /* 允许垂直滚动 */
  -webkit-overflow-scrolling: touch; /* 优化移动端滚动体验 */

  .user-info {
    display: flex;
    align-items: center;
    padding: 30rpx;
    background-color: #fff;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

    .avatar-box {
      position: relative;
      display: inline-block;
      .avatar {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
        background-color: #eee;
      }
      .vip-badge {
        position: absolute;
        left: -10rpx;
        top: -10rpx;
        width: 48rpx;
        height: 48rpx;
        z-index: 2;
      }
    }

    .info {
      flex: 1;
      display: flex;
      flex-direction: column;

      .title {
        font-size: 36rpx;
        font-weight: bold;
        margin-bottom: 10rpx;
      }

      .login-text {
        font-size: 28rpx;
        color: #999;
      }
    }

    .exchange-btn1 {
      padding: 10rpx 30rpx;
      background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
      border-radius: 30rpx;
      box-shadow: 0 4rpx 12rpx rgba(255, 107, 107, 0.3);

      text {
        color: #fff;
        font-size: 28rpx;
        font-weight: bold;
      }
    }
  }

  .function-list {
    background-color: #fff;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
    padding: 0 30rpx;
    display: block;
    width: 100%;
    box-sizing: border-box;
    max-height: none;
    overflow-y: visible;

    /* 添加一个临时边框以便观察 */
    // border: 2px dashed blue; /* 临时边框 */

    .list-item {
      display: flex;
      align-items: center;
      padding: 25rpx 0;
      border-bottom: 1rpx solid #eee;
      width: 100%;
      box-sizing: border-box;
      min-height: 80rpx;

      &:last-child {
        border-bottom: none;
      }

      .item-text {
        flex: 1;
        margin-left: 20rpx;
        font-size: 30rpx;
        color: #333;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      uni-icons {
        width: 40rpx;
        text-align: center;
        flex-shrink: 0;
      }

      uni-icons:last-child {
        margin-left: auto;
      }
    }
  }
  .menu-item {
    display: flex;
    align-items: center;
    padding: 30rpx;
    position: relative;
  }
  .menu-item:active {
    background-color: #f9fafc;
  }

  .menu-icon {
    width: 56rpx;
    height: 56rpx;
    border-radius: 16rpx;
    margin-right: 24rpx;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 60%;
  }
  .password-icon {
    background-color: #e6f7ff;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%231890ff"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/></svg>');
  }
  .menu-text {
    flex: 1;
    font-size: 30rpx;
    color: #333;
  }
  .arrow {
    color: #bbb;
    font-size: 40rpx;
    font-weight: 300;
  }
  .logout-container {
    margin-top: 40rpx;
    padding-bottom: 40rpx;
    /* 添加一个临时背景色以便观察 */
    // background-color: #ffcccc; /* 临时背景色 */
    /* 尝试提高层级 */
    position: relative; /* 或 absolute, fixed, sticky */
    z-index: 100; /* 较高的层级 */
  }
  .logout-btn {
    width: 100%;
    height: 90rpx;
    line-height: 90rpx;
    background-color: #fff;
    color: #ff6b6b;
    font-size: 32rpx;
    border-radius: 45rpx;
    border: 1px solid #ffecec;
  }
}
</style>
